import React from 'react';
import {bindActionCreators} from 'redux';
import * as orderFormActionCreator from '../../actions/order-form-actions';
import {connect} from 'react-redux';
import I18n from 'i18n-js';
import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
import {getRealSize, Touchable} from '../../utils';
import ThemeStyles from '../../styles';
import Ionicons from 'react-native-vector-icons/Ionicons';
import GumPicker from './gum-picker';
import BottomSheet, {BottomSheetFlatList} from '@gorhom/bottom-sheet';
import _ from 'lodash';
import InputItem from '../../components/input-item';
import {SvgUri} from 'react-native-svg';
import {
  ParamNames,
  ProductFieldToCategoryMapping,
  ProductParams,
  ProductType,
} from '../../reducers/constant';
import Validator from 'async-validator';
import Toast from '../../components/toast';
import RadioGroup from '../../components/radio-group';
import SheetHead from '../../components/items/sheet-head';

const snapPoints = [-1, 370, 370];

const gumData = [
  {
    value: 'upper',
    type: 'gum',
  },
  {
    value: 'lower',
    type: 'gum',
  },
  {
    value: '#11',
    type: 'gum',
  },
  {
    value: '#11-#12',
    type: 'join',
  },
  {
    value: '#12',
    type: 'gum',
  },
  {
    value: '#12-#13',
    type: 'join',
  },
  {
    value: '#13',
    type: 'gum',
  },
  {
    value: '#13-#14',
    type: 'join',
  },
  {
    value: '#14',
    type: 'gum',
  },
  {
    value: '#14-#15',
    type: 'join',
  },
  {
    value: '#15',
    type: 'gum',
  },
  {
    value: '#15-#16',
    type: 'join',
  },
  {
    value: '#16',
    type: 'gum',
  },
  {
    value: '#16-#17',
    type: 'join',
  },
  {
    value: '#17',
    type: 'gum',
  },
  {
    value: '#17-#18',
    type: 'join',
  },
  {
    value: '#18',
    type: 'gum',
  },
  {
    value: '#11-#21',
    type: 'join',
  },
  {
    value: '#21',
    type: 'gum',
  },
  {
    value: '#21-#22',
    type: 'join',
  },
  {
    value: '#22',
    type: 'gum',
  },
  {
    value: '#22-#23',
    type: 'join',
  },
  {
    value: '#23',
    type: 'gum',
  },
  {
    value: '#23-#24',
    type: 'join',
  },
  {
    value: '#24',
    type: 'gum',
  },
  {
    value: '#24-#25',
    type: 'join',
  },
  {
    value: '#25',
    type: 'gum',
  },
  {
    value: '#25-#26',
    type: 'join',
  },
  {
    value: '#26',
    type: 'gum',
  },
  {
    value: '#26-#27',
    type: 'join',
  },
  {
    value: '#27',
    type: 'gum',
  },
  {
    value: '#27-#28',
    type: 'join',
  },
  {
    value: '#28',
    type: 'gum',
  },
  {
    value: '#31',
    type: 'gum',
  },
  {
    value: '#31-#32',
    type: 'join',
  },
  {
    value: '#32',
    type: 'gum',
  },
  {
    value: '#32-#33',
    type: 'join',
  },
  {
    value: '#33',
    type: 'gum',
  },
  {
    value: '#33-#34',
    type: 'join',
  },
  {
    value: '#34',
    type: 'gum',
  },
  {
    value: '#34-#35',
    type: 'join',
  },
  {
    value: '#35',
    type: 'gum',
  },
  {
    value: '#35-#36',
    type: 'join',
  },
  {
    value: '#36',
    type: 'gum',
  },
  {
    value: '#36-#37',
    type: 'join',
  },
  {
    value: '#37',
    type: 'gum',
  },
  {
    value: '#37-#38',
    type: 'join',
  },
  {
    value: '#38',
    type: 'gum',
  },
  {
    value: '#31-#41',
    type: 'join',
  },
  {
    value: '#41',
    type: 'gum',
  },
  {
    value: '#41-#42',
    type: 'join',
  },
  {
    value: '#42',
    type: 'gum',
  },
  {
    value: '#42-#43',
    type: 'join',
  },
  {
    value: '#43',
    type: 'gum',
  },
  {
    value: '#43-#44',
    type: 'join',
  },
  {
    value: '#44',
    type: 'gum',
  },
  {
    value: '#44-#45',
    type: 'join',
  },
  {
    value: '#45',
    type: 'gum',
  },
  {
    value: '#45-#46',
    type: 'join',
  },
  {
    value: '#46',
    type: 'gum',
  },
  {
    value: '#46-#47',
    type: 'join',
  },
  {
    value: '#47',
    type: 'gum',
  },
  {
    value: '#47-#48',
    type: 'join',
  },
  {
    value: '#48',
    type: 'gum',
  },
];

/**
const gumItems = [
  {
    title: () => I18n.t('form.label.gum'),
    data: [
      {
        value: 'upper',
        type: 'gum',
      },
      {
        value: 'lower',
        type: 'gum',
      },
    ],
  },
  {
    title: () => I18n.t('form.label.tooth'),
    data: [
      {
        value: '#11',
        type: 'gum',
      },
      {
        value: '#12',
        type: 'gum',
      },
      {
        value: '#13',
        type: 'gum',
      },
      {
        value: '#14',
        type: 'gum',
      },
      {
        value: '#15',
        type: 'gum',
      },
      {
        value: '#16',
        type: 'gum',
      },
      {
        value: '#17',
        type: 'gum',
      },
      {
        value: '#18',
        type: 'gum',
      },
      {
        value: '#21',
        type: 'gum',
      },
      {
        value: '#22',
        type: 'gum',
      },
      {
        value: '#23',
        type: 'gum',
      },
      {
        value: '#24',
        type: 'gum',
      },
      {
        value: '#25',
        type: 'gum',
      },
      {
        value: '#26',
        type: 'gum',
      },
      {
        value: '#27',
        type: 'gum',
      },
      {
        value: '#28',
        type: 'gum',
      },
      {
        value: '#31',
        type: 'gum',
      },
      {
        value: '#32',
        type: 'gum',
      },
      {
        value: '#33',
        type: 'gum',
      },
      {
        value: '#34',
        type: 'gum',
      },
      {
        value: '#35',
        type: 'gum',
      },
      {
        value: '#36',
        type: 'gum',
      },
      {
        value: '#37',
        type: 'gum',
      },
      {
        value: '#38',
        type: 'gum',
      },
      {
        value: '#41',
        type: 'gum',
      },
      {
        value: '#42',
        type: 'gum',
      },
      {
        value: '#43',
        type: 'gum',
      },
      {
        value: '#44',
        type: 'gum',
      },
      {
        value: '#45',
        type: 'gum',
      },
      {
        value: '#46',
        type: 'gum',
      },
      {
        value: '#47',
        type: 'gum',
      },
      {
        value: '#48',
        type: 'gum',
      },
    ],
  },
  {
    title: () => I18n.t('form.label.join'),
    data: [
      {
        value: '#11-#12',
        type: 'join',
      },
      {
        value: '#12-#13',
        type: 'join',
      },
      {
        value: '#13-#14',
        type: 'join',
      },
      {
        value: '#14-#15',
        type: 'join',
      },
      {
        value: '#15-#16',
        type: 'join',
      },
      {
        value: '#16-#17',
        type: 'join',
      },
      {
        value: '#17-#18',
        type: 'join',
      },
      {
        value: '#11-#21',
        type: 'join',
      },
      {
        value: '#21-#22',
        type: 'join',
      },
      {
        value: '#22-#23',
        type: 'join',
      },
      {
        value: '#23-#24',
        type: 'join',
      },
      {
        value: '#24-#25',
        type: 'join',
      },
      {
        value: '#25-#26',
        type: 'join',
      },
      {
        value: '#26-#27',
        type: 'join',
      },
      {
        value: '#27-#28',
        type: 'join',
      },

      {
        value: '#31-#32',
        type: 'join',
      },
      {
        value: '#32-#33',
        type: 'join',
      },
      {
        value: '#33-#34',
        type: 'join',
      },
      {
        value: '#34-#35',
        type: 'join',
      },
      {
        value: '#35-#36',
        type: 'join',
      },
      {
        value: '#36-#37',
        type: 'join',
      },
      {
        value: '#37-#38',
        type: 'join',
      },
      {
        value: '#31-#41',
        type: 'join',
      },

      {
        value: '#41-#42',
        type: 'join',
      },
      {
        value: '#42-#43',
        type: 'join',
      },
      {
        value: '#43-#44',
        type: 'join',
      },
      {
        value: '#44-#45',
        type: 'join',
      },
      {
        value: '#45-#46',
        type: 'join',
      },
      {
        value: '#46-#47',
        type: 'join',
      },
      {
        value: '#47-#48',
        type: 'join',
      },
    ],
  },
];
**/
export const validator = new Validator({
  gum: {
    validator: (rule, value = [], callback, source) => {
      const join = _.get(source, 'join', []);
      if (value.concat(join).length) {
        return callback();
      }
      callback(new Error(I18n.t('form.validate.message.tooth')));
    },
  },
  join: {
    validator: (rule, value = [], callback, source) => {
      const gum = _.get(source, 'gum', []);
      if (value.concat(gum).length) {
        return callback();
      }
      callback(new Error(I18n.t('form.validate.message.join')));
    },
  },
  product: {
    required: true,
    message: () => I18n.t('form.validate.message.product'),
  },
  materials: {
    validator: (rule, value, callback, source) => {
      const type = _.get(source, 'product.type');
      if (type === ProductType.fixed) {
        if (value) {
          return callback();
        }
        callback(new Error(I18n.t('form.validate.message.materials')));
      }
      // 非固定类产品不用验证
      return callback();
    },
  },
  metal_types: {
    validator: (rule, value, callback, source) => {
      const type = _.get(source, 'product.type');
      const hasMetalType = _.get(source, 'materials.has_metal_type', false);
      if (type === ProductType.fixed && hasMetalType) {
        if (value) {
          return callback();
        }
        callback(new Error(I18n.t('form.validate.message.metal')));
      }
      // 材料中不包含金属时不用验证
      return callback();
    },
  },
  margins: {
    validator: (rule, value, callback, source) => {
      const type = _.get(source, 'product.type');
      const hasMargin = _.get(source, 'materials.has_margin', false);
      if (type === ProductType.fixed && hasMargin) {
        if (value) {
          return callback();
        }
        callback(new Error(I18n.t('form.validate.message.margins')));
      }
      // 不包含时不用验证
      return callback();
    },
  },
});

class ProductEditModal extends React.PureComponent {
  state = {
    sheet: -1,
  };

  componentDidMount() {
    const {orderFormActions, form} = this.props;
    if (form.isNew) {
      orderFormActions.updateForm({
        isNew: false,
      });
    }
  }

  onSave = async () => {
    const {navigation, orderFormActions, form} = this.props;
    try {
      await validator.validate(form.draft);
      orderFormActions.updateProduct({
        ...form.draft,
      });
      navigation.pop();
    } catch (e) {
      Toast.show(e.errors[0].message);
    }
  };

  onSelectedGum = gum => {
    const {orderFormActions, form} = this.props;
    if (gum.type === 'join') {
      const allGums = _.get(form, 'draft.gum', []);
      const nearbyGums = gum.value.split('-');
      const preGum = _.findIndex(allGums, value => value === nearbyGums[0]);
      const nextGum = _.findIndex(allGums, value => value === nearbyGums[1]);
      // console.log(nearbyGums, gum, preGum, nextGum);
      if (preGum < 0 || nextGum < 0) {
        return;
      }
    }
    const gums = _.get(form, `draft.${gum.type}`, []);
    if (_.findIndex(gums, value => value === gum.value) < 0) {
      gums.push(gum.value);
    } else {
      _.remove(gums, value => value === gum.value);
    }
    orderFormActions.updateForm({
      draft: {
        ...form.draft,
        [gum.type]: [...gums],
      },
    });
  };

  onExpandParams = (sheetState, field) => {
    const {form, categories} = this.props;
    // 其他选项为多选
    this.setState({
      sheet: sheetState,
      field,
    });

    if (field === 'product') {
      this.setState(
        {
          params: form.seller.products.map(p => p.product),
        },
        () => this.BottomSheet.snapTo(sheetState),
      );
      return;
    }
    const param =
      form.draft.product.type === ProductType.fixed
        ? ProductFieldToCategoryMapping.fixed[field]
        : ProductFieldToCategoryMapping.remvArch[field];
    const params = categories[param];
    // 材料需要使用产品中配置的指定材料
    if (field === ProductParams.fixed.materials) {
      const pm = form.draft.product.materials;
      this.setState(
        {
          params: params.filter(m => pm.includes(m.id)),
        },
        () => this.BottomSheet.snapTo(sheetState),
      );
      return;
    }
    this.setState(
      {
        params,
      },
      () => this.BottomSheet.snapTo(sheetState),
    );
  };

  onSelectedItem = item => {
    const {orderFormActions, form} = this.props;
    const {field} = this.state;

    if (field !== 'others') {
      this.BottomSheet.close();
    }
    // 更换产品时属性需要重置
    if (field === 'product') {
      if (_.get(form, 'draft.product.name', '') !== item.name) {
        orderFormActions.updateForm({
          draft: {
            pid: form.draft.pid,
            gum: form.draft.gum,
            join: form.draft.join,
            product: item,
          },
        });
      }
      return;
    }

    if (form.draft.product.type === ProductType.fixed) {
      // 更换材料时金属需要重置
      if (field === ProductParams.fixed.materials && !item.has_metal_type) {
        delete form.draft[ProductParams.fixed.metal_types];
      }

      if (field === ProductParams.fixed.margins && !item.has_margin) {
        delete form.draft[ProductParams.fixed.margins];
      }
    }

    if (field === 'others') {
      let param = _.get(form, 'draft.others', []);
      if (param.map(i => i.id).includes(item.id)) {
        param = param.filter(p => p.id !== item.id);
      } else {
        param.push(item);
      }
      orderFormActions.updateForm({
        draft: {
          ...form.draft,
          [field]: param,
        },
      });
      return;
    }
    orderFormActions.updateForm({
      draft: {
        ...form.draft,
        [field]: item,
      },
    });
  };

  render() {
    const {navigation, form, orderFormActions} = this.props;
    return (
      <SafeAreaView style={{flex: 1}}>
        <View style={Styles.header}>
          <Touchable onPress={() => navigation.pop()}>
            <View style={Styles.headerButton}>
              <Ionicons name="close" size={24} />
            </View>
          </Touchable>
          <Touchable onPress={this.onSave}>
            <View style={Styles.headerButton}>
              <Text>{I18n.t('button.save')}</Text>
            </View>
          </Touchable>
        </View>
        <ScrollView style={Styles.container}>
          <View style={Styles.block}>
            <Text style={Styles.title}>{I18n.t('form.label.tooth')}</Text>
            <View style={Styles.content}>
              <GumPicker
                gum={_.get(form, 'draft.gum', [])}
                join={_.get(form, 'draft.join', [])}
                onPress={() => {
                  this.BottomSheet.snapTo(1);
                  this.setState({sheet: 1});
                }}
              />
            </View>
          </View>
          <View style={Styles.block}>
            <Text style={Styles.title}>{I18n.t('form.label.params')}</Text>
            <View style={Styles.row}>
              <InputItem
                editable={false}
                arrow={true}
                isRequire={true}
                value={_.get(form, 'draft.product.name')}
                onFocus={() => this.onExpandParams(2, 'product')}
                placeholder={I18n.t('product.name')}
              />
            </View>
            {_.get(form, 'draft.product.type') === ProductType.fixed && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.materials.name')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.materials)
                  }
                  placeholder={I18n.t('product.params.materials')}
                />
              </View>
            )}
            {_.get(form, 'draft.materials.has_metal_type') && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.metal_types.name')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.metal_types)
                  }
                  placeholder={I18n.t('product.params.metals')}
                />
              </View>
            )}

            {_.get(form, 'draft.materials.has_margin') && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.margins.name')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.margins)
                  }
                  placeholder={I18n.t('product.params.margins')}
                />
              </View>
            )}
            {_.get(form, 'draft.product.pontic') && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.pontics.name')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.pontics)
                  }
                  placeholder={I18n.t('product.params.pontics')}
                />
              </View>
            )}
            {_.get(form, 'draft.product.type') === ProductType.fixed &&
              _.get(form, 'draft.product.implant') && (
                <View style={Styles.row}>
                  <InputItem
                    editable={false}
                    value={_.get(form, 'draft.implants.name')}
                    onFocus={() =>
                      this.onExpandParams(2, ProductParams.fixed.implants)
                    }
                    placeholder={I18n.t('product.params.implants')}
                  />
                </View>
              )}
            {_.get(form, 'draft.product.type') === ProductType.fixed && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.abutments.name')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.abutments)
                  }
                  placeholder={I18n.t('product.params.abutments')}
                />
              </View>
            )}
            {_.get(form, 'draft.product.type') === ProductType.remvArch &&
              _.get(form, 'draft.product.has_metal') && (
                <View style={Styles.row}>
                  <InputItem
                    editable={false}
                    value={_.get(form, 'draft.metals.name')}
                    onFocus={() =>
                      this.onExpandParams(2, ProductParams.remvArch.metals)
                    }
                    placeholder={I18n.t('product.params.metal_types')}
                  />
                </View>
              )}
            {_.get(form, 'draft.product.type') === ProductType.remvArch &&
              _.get(form, 'draft.product.has_wax') && (
                <View style={Styles.row}>
                  <InputItem
                    editable={false}
                    value={_.get(form, 'draft.waxes.name')}
                    onFocus={() =>
                      this.onExpandParams(2, ProductParams.remvArch.waxes)
                    }
                    placeholder={I18n.t('product.params.waxes')}
                  />
                </View>
              )}
            {_.get(form, 'draft.product') && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.colors.name')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.colors)
                  }
                  placeholder={I18n.t('product.params.colors')}
                />
              </View>
            )}
            {_.get(form, 'draft.product') && (
              <View style={Styles.row}>
                <InputItem
                  editable={false}
                  value={_.get(form, 'draft.others', [])
                    .map(v => v.name)
                    .join(',')}
                  onFocus={() =>
                    this.onExpandParams(2, ProductParams.fixed.others)
                  }
                  placeholder={I18n.t('product.params.others')}
                />
              </View>
            )}
          </View>
          <View style={Styles.block}>
            <Text style={Styles.title}>Redo</Text>
            <View style={Styles.content}>
              <RadioGroup
                items={[
                  {label: I18n.t('options.bool.yes'), value: true},
                  {label: I18n.t('options.bool.no'), value: false},
                ]}
                value={_.get(form, 'draft.redo', false)}
                onChange={value =>
                  orderFormActions.updateForm({
                    draft: {
                      ...form.draft,
                      redo: value,
                    },
                  })
                }
              />
            </View>
          </View>
          {_.get(form, 'draft.product') && <Summary {...form.draft} />}
        </ScrollView>
        <BottomSheet
          ref={ref => {
            this.BottomSheet = ref;
          }}
          handleComponent={() => (
            <SheetHead onClose={() => this.BottomSheet.close()} />
          )}
          style={Styles.sheetContainer}
          index={this.state.sheet}
          snapPoints={snapPoints}>
          {this.state.sheet === 1 && (
            <BottomSheetFlatList
              data={gumData}
              keyExtractor={(item, index) => item.value + index}
              ItemSeparatorComponent={() => <View style={Styles.separator} />}
              renderItem={({item}) => (
                <GumBlock
                  label={item.value}
                  onSelectedGum={() => this.onSelectedGum(item)}
                  selected={isSelectedGum(form, item.value)}
                />
              )}
            />
          )}
          {this.state.sheet === 2 && (
            <BottomSheetFlatList
              data={this.state.params}
              ItemSeparatorComponent={() => <View style={Styles.separator} />}
              renderItem={({item}) => (
                <ParamsItem
                  {...item}
                  onSelected={() => this.onSelectedItem(item)}
                  selected={isSelected(this.state.field, item, form)}
                />
              )}
            />
          )}
        </BottomSheet>
      </SafeAreaView>
    );
  }
}

// <BottomSheetSectionList
//   sections={gumItems}
//   keyExtractor={(item, index) => item.value + index}
//   contentContainerStyle={Styles.gumContainer}
//   renderSectionHeader={({section}) => (
//     <View style={Styles.gumSectionHead}>
//       <Text style={Styles.gumSectionHeadTitle}>{section.title}</Text>
//     </View>
//   )}
//   renderItem={({item}) => (
//     <GumBlock
//       label={item.value}
//       onSelectedGum={() => this.onSelectedGum(item)}
//       selected={isSelectedGum(form, item.value)}
//     />
//   )}
// />;

const isSelected = (field, item, form) => {
  const value = _.get(form, `draft.${field}`);
  if (value) {
    // 多选参数
    if (Array.isArray(value)) {
      return value.map(v => v.id).includes(item.id);
    }
    // 单选参数
    return item.name === value.name;
  }
  return false;
};

const Summary = props => {
  const allParams = Object.values({
    ...ProductParams.fixed,
    ...ProductParams.remvArch,
  });
  const params = Object.keys(props).filter(p => allParams.includes(p));
  return (
    <View style={Styles.summaryContainer}>
      <Text style={Styles.summaryTitle}>{props.product.name}</Text>
      {params.map((p, i) => (
        <View style={Styles.summaryContent} key={`${i}_${ParamNames[p]}`}>
          <Text style={Styles.summaryParam}>{I18n.t(ParamNames[p])}</Text>
          <Text style={Styles.summaryValue}>{props[p].name}</Text>
        </View>
      ))}
    </View>
  );
};

const isSelectedGum = (form, item) => {
  const gum = _.get(form, 'draft.gum', []);
  const join = _.get(form, 'draft.join', []);
  return gum.concat(join).includes(item);
};

const GumBlock = props => (
  <Touchable onPress={() => props.onSelectedGum()}>
    <View
      style={[
        Styles.gumBlock,
        props.selected && {
          backgroundColor: '#E7F2FF',
          borderColor: '#E7F2FF',
        },
      ]}>
      <Text
        style={[
          Styles.gumBlockLabel,
          props.selected && {color: ThemeStyles.Color.primary.color},
        ]}>
        {props.label}
      </Text>
    </View>
  </Touchable>
);

const ParamsItem = props => {
  let name = props.name;
  if (props.group) {
    name = `${props.group}-[${name}]`;
  }
  return (
    <Touchable onPress={() => props.onSelected()}>
      <View
        style={[
          Styles.productBlock,
          props.selected && {backgroundColor: '#E7F2FF'},
        ]}>
        {props.url && (
          <SvgUri
            fill={props.selected ? ThemeStyles.Color.primary.color : '#999999'}
            uri={_.get(props, 'url', '')}
            width={24}
            height={24}
          />
        )}
        <Text
          style={[
            Styles.productLabel,
            props.selected && {color: ThemeStyles.Color.primary.color},
          ]}>
          {name}
        </Text>
      </View>
    </Touchable>
  );
};

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  form: state.orderForm,
  categories: state.constant.category,
});

const mapDispatchToProps = dispatch => ({
  orderFormActions: bindActionCreators(orderFormActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(ProductEditModal);

const Styles = StyleSheet.create({
  container: {},
  sheetContainer: {
    borderTopColor: ThemeStyles.Color.line.color,
    borderTopWidth: StyleSheet.hairlineWidth,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 12,
    },
    shadowOpacity: 0.58,
    shadowRadius: 16.0,

    elevation: 24,
  },
  gumContainer: {},
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: getRealSize(15),
    paddingHorizontal: getRealSize(15),
  },
  gumSectionHead: {
    backgroundColor: '#F7F7F7',
    paddingVertical: getRealSize(4),
    paddingHorizontal: getRealSize(12),
  },
  gumSectionHeadTitle: {},
  block: {
    paddingHorizontal: getRealSize(15),
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: getRealSize(12),
  },
  headerButton: {
    paddingHorizontal: getRealSize(8),
    paddingVertical: getRealSize(4),
  },
  title: {
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    color: '#333',
    marginTop: getRealSize(15),
  },
  row: {
    flex: 1,
    marginTop: getRealSize(15),
  },
  productListContainer: {
    width: getRealSize(168),
    height: getRealSize(48),
    backgroundColor: '#F7F7F7',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  separator: {
    height: getRealSize(12),
  },
  productBlock: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: getRealSize(8),
    paddingHorizontal: getRealSize(12),
    backgroundColor: '#F7F7F7',
    borderRadius: getRealSize(4),
    marginHorizontal: getRealSize(15),
  },
  productLabel: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#999',
    flex: 1,
    marginLeft: getRealSize(8),
  },
  paramsItemExtra: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#999',
    width: getRealSize(128),
    textAlign: 'right',
  },
  gumBlock: {
    borderRadius: getRealSize(4),
    backgroundColor: '#f7f7f7',
    paddingVertical: getRealSize(4),
    paddingHorizontal: getRealSize(8),
    marginVertical: getRealSize(4),
    marginHorizontal: getRealSize(15),
  },
  gumBlockLabel: {
    color: '#999',
    fontSize: getRealSize(18),
  },
  summaryContainer: {
    backgroundColor: '#F7F7F7',
    marginVertical: getRealSize(15),
    marginHorizontal: getRealSize(15),
    borderRadius: getRealSize(4),
  },
  summaryTitle: {
    fontSize: getRealSize(14),
    fontWeight: 'bold',
    color: '#333333',
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(8),
  },
  summaryContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(8),
  },
  summaryParam: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
    width: getRealSize(72),
  },
  summaryValue: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#333',
    flex: 1,
  },
});
